<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>099-获取输入框的值插入到无序列表的后面并且可以删除该列表项.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 400px;
			margin: 100px auto;
		}
		li{
			list-style: none;
			line-height: 40px;
			margin-bottom: 1px dotted #000;
		}
		a{
			color: #f69;
			float: right;
		}
	</style>
</head>
<body>
	<div class="box">
		<textarea id="txt" cols="30" rows="10"></textarea>
		<input type="button" id="btn" value="发布">
		<ul id="ul1">
			<li>xxx<a href="javascript:;">删除</a></li>
		</ul>
	</div>
</body>
<script>
	var oTxt = document.getElementById('txt');
	var oBtn = document.getElementById('btn');
	var oUl = document.getElementById('ul1');

	oBtn.onclick = function(){
		var Val = oTxt.value;

		var oLi = document.createElement('li');
		oLi.innerHTML = Val;

		var oA = document.createElement('a');
		oA.href = "javascript:;"
		oA.innerHTML = '删除';

		oA.onclick = function(){
			oUl.removerChild(this.parentNode);
		}


		oLi.appendChild(oA);

		oUl.insertBefore(oLi,oUl.firstChild);
		oTxt.value = '';
	}
</script>
</html>